<template>
	<div v-for="(_v, i) in showCount" :key="i" class="basic-skeleton">
		<a-skeleton v-for="(item, index) in widths" :key="index" :animation="animation" :loading="loading" class="flex-1">
			<a-skeleton-line :rows="item.length" :widths="item" :line-spacing="12" />
		</a-skeleton>
	</div>
</template>
<script lang="ts" setup>
interface IProps {
	showCount?: number;
	widths?: any;
	renderRow?: number;
	animation?: boolean;
	loading?: boolean;
}
withDefaults(defineProps<IProps>(), {
	showCount: 4,
	widths: [["100%"], ["100%", "100%"], ["100%", "100%"], ["100%", "100%"], ["100%", "100%"]],
	animation: true,
	loading: false
});
</script>

<style lang="less">
.basic-skeleton {
	@apply flex gap-x-8 w-full;
	.arco-skeleton {
		@apply my-auto;
		&-line {
			&-row {
				@apply rounded-2 bg-[#b0afb0];
			}
		}
	}
}
</style>
